<template>
	<view>
		<view v-if="item" style="padding: 30rpx;">
			<!-- 上面的提醒 -->
			<view class="u-padding-20 u-content-color " style="font-weight: bold;background-color: white;">
				<text>押金金额：{{item.deposit_pay_amont}}</text>
				<text style="margin: 0 10rpx;">/</text>
				<text>可用余额：{{item.active_blance_amont}}</text>

			</view>
			<!-- 表单 -->
			<view>
				<u-form :model="form" ref="uForm" label-width="auto">
					<u-form-item label="扣款金额" prop="deposit_request_amont"><u-input type="digit"
							v-model="form.deposit_request_amont" /></u-form-item>
					<u-form-item label="扣款类型">
						<u-radio-group v-model="form.deduction_type">
							<view style="display: grid;grid-template-columns: repeat(2,1fr);">
								<u-radio
									v-for="(item, index) in [{id:1,label:'车损押金',value:1},{id:2,label:'违章押金',value:2},{id:3,label:'通用押金',value:3},{id:4,label:'押金抵扣租金',value:4}]"
									:key="index" :name="item.value">
									{{item.label}}
								</u-radio>
							</view>
						</u-radio-group>
					</u-form-item>
					<!-- <u-form-item label="扣款方式" prop="deposit_deduction_channel_label">
						<u-select v-model="showSelectChannel" @confirm="confirm" :list="[
														{id:1,label:'支付宝授权',value:1},
														{id:2,label:'微信扫码',value:2},
														{id:3,label:'微信转账',value:3},
														{id:4,label:'支付宝扫码',value:4},
														{id:5,label:'支付宝转账',value:5},
														{id:6,label:'信用卡授权',value:6},
														{id:7,label:'银行卡转账',value:7},
														{id:8,label:'现金',value:8},
														{id:9,label:'免缴',value:9},
														{id:10,label:'其他',value:10},
													]"></u-select>
						<u-input v-model="form.deposit_deduction_channel_label" :disabled="true" type="select"
							@click="showSelectChannel=true" />
					</u-form-item> -->
					<u-form-item label="扣款原因" prop="deposit_reason">
						<u-input v-model="form.deposit_reason" />
					</u-form-item>
					<u-form-item label="依据截图">
						<u-upload ref="uUpload" :auto-upload="false" :show-progress="true"
							:form-data="{path:'/static/img/deposit_deduction_img/'}" :multiple="true">
						</u-upload>
					</u-form-item>
					<view style="width: 100%;">
						<u-button @click="submit" type="primary">申请扣款</u-button>
					</view>
				</u-form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cos from '../../utils/cos';
	export default {
		data() {
			return {
				showSelectChannel: false,
				item: null,
				form: {
					deposit_request_amont: '',
					deduction_type: '',
					deposit_deduction_channel: 1,
					deposit_deduction_channel_label: '支付宝预授权转支付',
					deposit_reason: ''
				},
				rules: {
					deposit_request_amont: [{
							required: true,
							message: '请输入扣款金额',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if (parseFloat(value) > parseFloat(this.item.active_blance_amont)) {
									return false;
								} else {
									return true;
								}
							},
							message: '扣款金额不能大于押金余额',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					deduction_type: [{
						required: true,
						message: '请选择扣款类型',
						trigger: ['blur', 'change']
					}],
					deposit_deduction_channel_label: [{
						required: true,
						message: '请选择扣款方式',
						trigger: ['blur', 'change']
					}],
					deposit_reason: [{
						required: true,
						message: '扣款原因',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(options) {
			var that = this;
			if (options.item) {
				this.item = JSON.parse(decodeURIComponent(options.item));
				console.log(this.item);
			}
		},
		methods: {
			confirm(e) {
				this.form.deposit_deduction_channel = e[0].value;
				this.form.deposit_deduction_channel_label = e[0].label;
			},
			submit() {
				console.log("这个方法进来了呀1");
				var that = this;
				var list = this.$refs.uUpload.lists;
				console.log("这个方法进来了呀2");
				var dir = '/static/img/deposit_deduction_img/';
				console.log("这个方法进来了呀3");
				var form = JSON.parse(JSON.stringify(this.form));
				console.log("这个方法进来了呀4");
				console.log(form);
				this.$refs.uForm.validate(valid => {
					if (valid) {
						cos.uploadFiles(list, dir, (data) => {
							var record_img = data.files.map(item => item.options.Key);
							form.deposit_deduction_img = record_img.toString();
							form.deposit_pay_id = that.item.deposit_pay_id;
							that.$http.post('/depositDeductionRequest/insert', form, (res) => {
								if (res.data.success) {
									that.$refs.uToast.show({
										title: '申请成功',
										type: "success"
									});
									uni.$emit("getDepositPayList", that.data);
									uni.navigateBack();
								} else {
									that.$refs.myModal.show('登录失败', res.data.result.message);
								}
							});
						});
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>